<gm:page title="Places" authenticate="false" onload="switchMap()">
  
  <script type="text/javascript">
     function switchMap() {
        var map = google.mashups.getObjectById("map").getMap();
        map.setMapType(map.getMapTypes()[2]); // Hybrid view is the third type supported by the Maps API
      }
  </script>  

   <table width="100%">
     <tr>
       <td width="300" valign="top">
         <gm:list id="list" template="photoList" height="300" data="http://picasaweb.google.com/data/feed/base/user/neil.p.miller/albumid/5197030548023323153?kind=photo&alt=atom&authkey=cLz-xF7f1PY&hl=en_US">
           <gm:handleEvent src="map" event="select"/>
         </gm:list>
       </td>
      <td>
         <gm:map id="map" height="300" data="${list}">
           <gm:handleEvent src="list" event="select"/>
         </gm:map>
       </td>
     </tr>
  </table>

  <gm:template id="photoList">
     <div repeat="true" style="padding: 5px">
        <gm:image ref="media:group/media:thumbnail/@url" height="54" width="54" mode="fill" style="float: left"/>
        <gm:text ref="atom:title"/>
        <br style="clear: both"/>
     </div>
  </gm:template>
</gm:page>

